<template>
  <div id="tm-home">
    <div class="header">
        <div class="lf">
          <img src="../../../images/logo2.png" class="logo lf">
          <!-- <h1 class="tit"><span>CSII</span>云智</h1> -->
          <div class="select-list lf"></div>
        </div>
        <div class="rf">
          <p class="user lf">
            <i class="iconfont icon-person"></i>
            用户 : {{ userName}}
          </p>
          <p class="goback lf" @click="goback" style="cursor: pointer;">
            返回
          </p>
          <p class="logout lf" @click="logout" style="cursor: pointer;">
            退出
          </p>
        </div>
      </div>
    <div class="body bg-color-gray">
      <div class="menu lf" :style="{ height: `${height}px` }">
        <happy-scroll color="rgba(141, 196, 235, .5)" resize>
          <div id="asd123">
            <el-menu :router="true" style="width: 175px" :unique-opened="true" :default-active="path" >
              <el-submenu :index="index + ''" v-for="(item, index) in data" :key="item.id">
                <template slot="title">
                  <!--<i class="iconfont" :class="item.obj.iconId" style="padding:0px 10px"></i>-->
                  <span>{{ item.obj.name }}</span>
                </template>
                <el-menu-item-group>
                  <el-menu-item :index="val.obj.url || '#'" v-for="val in item.children" :key="val.id" @click.native="updatePath(val.obj.url)">{{ val.obj.name }}</el-menu-item>
                </el-menu-item-group>
              </el-submenu>
            </el-menu>
          </div>
        </happy-scroll>
      </div>
      <div class="body-header" :style="{ height: `${height}px` }">
        <router-view/>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import { VNoBorderSelect, VDropdown, VButton, VHeader } from '../../../components'
  import { nextPage } from '../../../assets/js/index'
  import databoard from '../../tmPaas/dataOverview/dataBoard/DataBoard'
  import ajax from '../../../api/ajax/ajax'
  import api from '../../../api/url'
  import { mixinParams } from '../../../assets/js/mixin1'
  import { mapState } from 'vuex'
  export default {
    components: {
      VHeader,
      VNoBorderSelect,
      VDropdown,
      VButton,
      databoard
    },
    mixins: [mixinParams],
    data () {
      return {
        data: [],
        commonData: {},
        height: null,
        userName: ''
      }
    },
    computed: {
      ...mapState([
        'path'
      ])
    },
    methods: {
      // 获取当前系统
      getCurrSystem () {
        ajax.post(api.GETMENU, {
          sys_no: 'M201'
        }).then(res => {
          this.data = res.data
        })
        ajax.post(api.QUERYALLCOMMONDATA).then(res => {
          this.commonData = res.data
          sessionStorage.setItem('commonData', JSON.stringify(this.commonData))
        })
      },
      logout () {
        ajax.post(api.LOGOUT).then(res => {
        this.$confirm('将退出登录是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '退出成功!'
          })
        setTimeout(() => {
          window.location.href = '/'
          }, 500)
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消退出'
            })
          })
        })
      },
      goback () {
        window.location.href = '/view/systemList'
      },
      // 更新页面路径
      updatePath (url) {
        nextPage(url)
      }
    },
    created () {
      this.getCurrSystem()
      this.userName = sessionStorage.getItem('userName')
      this.height = window.innerHeight - 70
      window.onresize = () => {
        this.height = window.innerHeight - 70
      }
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  #tm-home
    .header
      background #409eff
      height 70px
      color #fff
      position relative
      z-index 99
      .lf
        .logo
          width 207px
          position relative
          top 12px
          padding-left 15px
      .rf
        height 100%
        margin-right 10px
        .el-select
          margin 10px 20px 0 0
          .el-input
            .el-input__inner
              width 180px
              padding 0!important
              color #fff
              background transparent
              border 0 none
              border-bottom 1px solid #fff
              border-radius 0
              &::placeholder
                color #fff
            .el-icon-arrow-up:before
              color #fff
          .el-input__icon
            width 14px
        p
          height 100%
          line-height 70px
          margin-left 10px
          padding 0 10px
          i
            margin-right 5px
        .help-center
          cursor pointer
        .help-center:hover
          background #9eceff
        .help-center:active
          background #3A7CC1
    .body
      overflow hidden
      .menu
        width 200px
        background #fff
        padding 10px
        overflow auto
        .el-menu
          border-right solid 0
          .el-submenu__title
            font-size 16px
        .el-submenu .el-menu-item
          min-width 160px
        .is-active
          .el-submenu__title
            i.iconfont, span
              color #016DFB
      .body-header
        overflow auto
        .el-input
          .el-input__inner
            font-size 12px
</style>
